import { mat4, vec3 } from 'gl-matrix'
import * as utils from '../utils'

function createCourse23 (gl: WebGLRenderingContext, dom: HTMLCanvasElement) {
  // 开启深度测试
  gl.enable(gl.DEPTH_TEST)
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

  const vectexShaderSrc = `
  uniform mat4 u_MvpMatrix;
  attribute vec4 a_Position;
  attribute vec4 a_Color;
  varying vec4 v_Color;
    void main () {
        gl_Position = u_MvpMatrix * a_Position;
        v_Color = a_Color;
    }
  `

  const fragmentShaderSrc = `
    precision mediump float;
    varying vec4 v_Color;
        void main () {
            gl_FragColor = v_Color;
        }
  `
  const program = utils.initShaders(gl, vectexShaderSrc, fragmentShaderSrc)

  const vectics = new Float32Array([
    -0.1, -0.1, -0.1, 1.0, 0.0, 0.0, 1.0,
    +0.1, -0.1, -0.1, 1.0, 0.0, 0.0, 1.0,
    +0.0, +0.1, -0.1, 1.0, 0.0, 0.0, 1.0,

    -0.1, -0.1, -0.2, 0.0, 1.0, 0.0, 1.0,
    +0.1, -0.1, -0.2, 0.0, 1.0, 0.0, 1.0,
    +0.0, +0.1, -0.2, 0.0, 1.0, 0.0, 1.0,

    -0.1, -0.1, -0.3, 0.0, 0.0, 1.0, 1.0,
    +0.1, -0.1, -0.3, 0.0, 0.0, 1.0, 1.0,
    +0.0, +0.1, -0.3, 0.0, 0.0, 1.0, 1.0
  ])
  const size = vectics.BYTES_PER_ELEMENT
  const vectexBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, vectexBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, vectics, gl.STATIC_DRAW)

  const aPosition = gl.getAttribLocation(program, 'a_Position')
  gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, size * 7, 0)
  gl.enableVertexAttribArray(aPosition)

  const aColor = gl.getAttribLocation(program, 'a_Color')
  gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, size * 7, size * 3)
  gl.enableVertexAttribArray(aColor)

  const projMatrix = mat4.create()
  mat4.perspective(projMatrix, 70, dom.offsetWidth / dom.offsetHeight, 0.01, 3)

  const viewMatrix = mat4.create()
  const eye = vec3.create()
  vec3.set(eye, 0.0, 0.0, 0.5)
  const center = vec3.create()
  vec3.set(center, 0.0, 0.0, 0.0)
  const up = vec3.create()
  vec3.set(up, 0.0, 1.0, 0.0)
  mat4.lookAt(viewMatrix, eye, center, up)

  const modelMatrix1 = mat4.create()
  const v1 = vec3.create()
  vec3.set(v1, -0.2, 0.0, 0.0)
  mat4.fromTranslation(modelMatrix1, v1)

  const modelMatrix2 = mat4.create()
  const v2 = vec3.create()
  vec3.set(v2, 0.2, 0.0, 0.0)
  mat4.fromTranslation(modelMatrix2, v2)

  const viewModelMatrix1 = mat4.create()
  mat4.multiply(viewModelMatrix1, viewMatrix, modelMatrix1)
  const uMvpMatrix1 = mat4.create()
  mat4.multiply(uMvpMatrix1, projMatrix, viewModelMatrix1)

  const viewModelMatrix2 = mat4.create()
  mat4.multiply(viewModelMatrix2, viewMatrix, modelMatrix2)
  const uMvpMatrix2 = mat4.create()
  mat4.multiply(uMvpMatrix2, projMatrix, viewModelMatrix2)

  const uMvpMatrix = gl.getUniformLocation(program, 'u_MvpMatrix')
  gl.uniformMatrix4fv(uMvpMatrix, false, uMvpMatrix1)
  gl.drawArrays(gl.TRIANGLES, 0, 9)

  gl.uniformMatrix4fv(uMvpMatrix, false, uMvpMatrix2)
  gl.drawArrays(gl.TRIANGLES, 0, 9)
}

export {
  createCourse23
}
